<template>
    <el-container id="home-background">

        <el-main>
           <transition name="slide-fade">
            <div v-if="show" style="width:80%;margin:0 auto;">

                <div style="text-align:left;height:340px">
                    <img :src="require('@/assets/FoodoirLogo.png')"
                        style="width:400px;margin-top:-50px;margin-right:0px;" />
                </div>

                 
                <p style="color:#fff;font-size:30px;margin-top:-30px;font-weight:700">
                    一粥一饭当思来之不易,一饮一啄饱蘸苦辣酸甜。
                </p>

                <el-row  style="margin-top:40px">
                    <el-col :span="12">
                        <ShareButton style="width:150px;float:right"></ShareButton>
                    </el-col>
                    <el-col :span="12">
                        <LoginButton v-if="this.$store.state.user.username == ''" style="width:150px;"></LoginButton>
                        <PersonButton v-if="this.$store.state.user.username != ''"  style="width:150px;"></PersonButton>
                    </el-col>
                </el-row>

                
            </div>
            </transition>
        </el-main>

        <el-footer>

        </el-footer>

    </el-container>
</template>

<script>
    //import Font from './style/Font';
    import LoginButton from './style/LoginButton'
    import ShareButton from './style/ShareButton'
    import PersonButton from './style/PersonButton'

    // import Today from './util/TodayCard'
    // import Popular from './util/Popular'

    export default {
        name: 'Home',
        components: {
            // Font,
            // Today,
            // Popular,
            LoginButton,
            ShareButton,
            PersonButton
        },
        data() {
            return {
                show: false,
                msg: 'Hello'
            }
        },
        mounted() {
            this.show = true
        },
    }
</script>

<style scoped>
    #home-background {
        /* background-image: linear-gradient(to right, #868f96 0%, #596164 100%); */
        background: url("../../assets/index-bj.jpg") no-repeat;
        background-position: center;
        height: 800px;
        width: 100%;
        background-size: cover;
        /* position: absolute;  */
    }
    .slide-fade-enter-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter,
    .slide-fade-leave-to

    /* .slide-fade-leave-active for below version 2.1.8 */
        {
        transform: translateY(20px);
        opacity: 0;
    }
</style>